@import './player/index.css';
html,body{
    width:100%;
    height: 100%;
}
.wrapper{
    width:100%;
    height: 100%;
    /* border: 1px solid black; */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.top{
    height: 45px;
    flex: 0 0 45px;
    border: 1px solid chocolate;
    /* background-color:chocolate; */
    box-sizing: border-box;
}

.top .iconfont{
    font-size: 40px;
    color: chocolate;
    line-height: 45px;
    cursor: pointer;
}
.top span{
    font-size: 16px;
    line-height: 45px;
    color: silver;
    text-align: center;
}



.bottom{
    /* border: 1px solid orange; */
    flex: 1 1 auto;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}

.bottom .left{
    flex: 0 0 20%;
    /* border: 1px solid red; */
    overflow:auto;
    box-sizing: border-box;
    background-color:rgba(0, 0, 0, 0.1)
}
.bottom .right{
    flex: 1 1 auto;
    border: 1px solid #ddd;
    flex-direction: column;
    overflow: auto;
    display: flex;
}
.videoList a{
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
    display: block;
    
}
.videoList a:hover{
    background-color: coral;
    color: #fff;
}
.videoList ul li{
    text-align: left;
    /* text-indent: 10px; */
    line-height:40px;
    background-color:#fff;
    border: 1px solid #ddd;
    box-sizing: border-box;
    
}

.videoList ul li ul{
    font-size: 15px;
    text-indent: 15px;
    
}

.videoList ul li ul li ul{
    font-size: 14px;
    text-indent: 25px;
}

.videoList ul li ul li ul li ul{
    text-indent: 30px;
}
.videoList ul li ul li ul li ul li ul{
    text-indent: 40px;
}